<!--
 * @Author: licongwei
 * @Date: 2022-03-08 15:39:33
 * @FileDescription: 地图切换菜单
-->
<template>
  <div class="map-menu">
    <ul class="items">
      <li
        :class="['item', { active: state.id === item.id }]"
        v-for="item of state.data"
        :key="item.id"
        @click="state.handleClick(item.id, item.name)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'mapMenu',
  props: {
    state: {
      type: Object,
      default: () => {
        return {
          data: [],
          curId: '',
          getData: () => {},
          handleClick: () => {}
        }
      }
    }
  },
  setup(props) {
    props.state.getData()
    return {}
  }
})
</script>
<style lang="less" scoped>
.map-menu {
  position: absolute;
  top: 5px;
  right: 30px;
  z-index: 99;
  ul.items {
    li.item {
      width: 170px;
      line-height: 40px;
      border-radius: 20px;
      border: 1px solid #5edcff;
      font-size: 18px;
      color: #4bdbff;
      text-align: center;
      background-color: #1a40b5;
      cursor: pointer;
      margin: 6px 0;
      transition: all 0.2s;
      font-family: 'dlh';
      &.active {
        color: #fff;
        font-weight: 700;
        box-shadow: 0 0 10px #00c6ff inset;
      }
    }
  }
}
</style>
